import { Form, Input } from 'antd';
import { ModelerService } from '@/pages/workflow/model/components/modeler/ModelerService';
import { useEffect } from 'react';

export const Basic = (props: { modelerService: ModelerService }) => {
  const [form] = Form.useForm();

  useEffect(() => {
    form.setFieldsValue({
      id: props.modelerService?.element?.id,
      name: props.modelerService?.businessObject?.name,
      instanceName: props.modelerService?.customerExtension?.instanceName,
      desc: props.modelerService?.businessObject?.documentation?.[0].text,
    });
  }, [props.modelerService.element]);

  return (
    <Form layout="vertical" form={form}>
      <Form.Item
        label="ID"
        name="id"
        required={true}
        rules={[{ required: true, message: '请输入ID' }]}
      >
        <Input
          onBlur={(event) => {
            if (event.target.value) {
              props.modelerService.setProperty('id', event.target.value);
            } else {
              event.target.focus();
            }
          }}
        />
      </Form.Item>
      <Form.Item
        label="名称"
        name="name"
        required={true}
        rules={[{ required: true, message: '请输入名称' }]}
      >
        <Input
          onBlur={(event) => {
            if (event.target.value) {
              props.modelerService.setProperty('name', event.target.value);
            } else {
              event.target.focus();
            }
          }}
        />
      </Form.Item>
      {props.modelerService.is(['bpmn:Process', 'bpmn:UserTask']) && (
        <Form.Item label="实例名称模板" name="instanceName">
          <Input
            onBlur={(event) => {
              props.modelerService.setCustomerExtensionElement(
                'instanceName',
                event.target.value,
              );
            }}
          />
        </Form.Item>
      )}
      <Form.Item label="描述" name="desc">
        <Input.TextArea
          onBlur={(event) => {
            props.modelerService.setExtendArrayProperty(
              'bpmn:Documentation',
              'documentation',
              'text',
              event.target.value,
            );
          }}
        />
      </Form.Item>
    </Form>
  );
};
